<template>
    <div>
        <div class="footer">
            已完成{{ isComplete }}/全部{{ list.length }}
            <button v-if="isComplete > 0" @click="clear">清除已完成</button>
        </div>
    </div>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
    name: "navFooter",
    props: {
        list: {
            type: Array,
            required: true,
        },
    },
    setup(props, ctx) {
        //显示已完成事件的个数
        let isComplete = computed(() => {
            //过滤已完成的
            let arr = props.list.filter((item) => {
                return item.complete;
            });
            return arr.length;
        });
        //清除已完成
        let clear = () => {
            let newArr = props.list.filter((item) => {
                return item.complete === false;
            });
            ctx.emit("clear", newArr);
        };
        return {
            isComplete,
            clear,
        };
    },
});
</script>
<style lang="less" scoped>
.footer {
    width: 500px;
    height: 30px;
    margin-top: 5px;
    position: relative;
    button {
        position: absolute;
        right: 0;
    }
}
</style>
